@import url("https://info.email.also.com/rs/833-IPQ-934/images/ALSO_Marketo_Form.css");

/* Font-face Styling */
    @font-face {
        font-family: "Rois Bold";
        src:
            url("https://info.email.also.com/rs/833-IPQ-934/images/rois-bold_eot.eot?#iefix")
                format("embedded-opentype"),
            url("https://info.email.also.com/rs/833-IPQ-934/images/rois-bold_woff2.woff2") format("woff2"),
            url("https://info.email.also.com/rs/833-IPQ-934/images/rois-bold_woff.woff") format("woff"),
            url("https://info.email.also.com/rs/833-IPQ-934/images/rois-bold_ttf.ttf") format("truetype");
        font-weight: bold;
        font-style: normal;
        font-stretch: normal;
    }
    @font-face {
        font-family: "Verdana";
        src:
            url("https://info.email.also.com/rs/833-IPQ-934/images/Verdana.eot") format("embedded-opentype"),
            url("https://info.email.also.com/rs/833-IPQ-934/images/Verdana.woff") format("woff"),
            url("https://info.email.also.com/rs/833-IPQ-934/images/Verdana.ttf") format("truetype");
        font-weight: normal;
    }
 /* End Font-face Styling */

/* Page Styling */
h1,
h2,
h3,
h4,
h5,
h6 {
     font-family: "Rois Bold", Verdana, Arial, sans-serif;
}

.overlay {
     bottom: 0;
     left: 0;
     content: "";
     position: absolute;
     right: 0;
     top: 0;
     z-index: 0;
     background-color: #ffffff;
}

img {
     max-width: 100%;
}

.header {
     position: relative;
}

.headerleft {
     text-align: left;
}

.headerright {
     text-align: right;
}
    
.header .desktopNav {
    display: flex;
    padding: 20px 0;
    justify-content: flex-end;
    align-items: center;
}
    
.header .desktopNav a:hover,
.header .desktopNav a:active,
.header .desktopNav a:focus,
.header .mobilepNav a:hover, 
.header .mobilepNav a:active,
.header .mobilepNav a:focus {
    color: #89E872;
}
    
.header .desktopNav a {
    padding: 10px;
    font-size: 14px;
    text-transform: uppercase;
    
}

.header .mobileNav a,
.header .desktopNav a {
    color: #000;
}
    
.header .desktopNav a:hover {
    color: #89E872;
    text-decoration: none;
}
    
.header .desktopNav div:last-child {
    padding-right: 0;
    width: 15%;
    float: right;
}
    
.header .mobileNav {
    display: none;
}

.banner {
     padding: 60px 0 60px;
     background: #89e872;
     background-image: url(https://www.also.com//ec/cms5/media/img/global_images/key_visuals/big_hero_key_visual_general.svg);
     /* fallback */
     background-image: url(https://www.also.com//ec/cms5/media/img/global_images/key_visuals/big_hero_key_visual_general.svg),
         linear-gradient(135deg, #89e872, #006b7d);
     background-repeat: no-repeat;
     background-position: center bottom;
}

/* Hero Section */
.banner h1 {
     font-size: 40px;
     line-height: 35px;
     color: #262626;
     font-weight: bold;
     word-break: break-word;
}

.hero-section {
     display: grid;
     grid-template-columns: repeat(12, 1fr);
     align-items: flex-end;
}

.hero-section .hero-text,
.hero-section .hero-image {
     grid-row: 1/2;
}

.hero-text {
     background-color: #fff;
     padding-left: 0;
     padding-right: 0;
     z-index: 999;
     grid-column-start: 1;
     grid-column-end: 8;
}

.hero-text .mktoText {
     padding: 30px;
}

.hero-image {
     padding-left: 0;
     padding-right: 0;
     grid-column-start: 5;
     grid-column-end: 13;
}

.hero-image img {
     display: block;
     width: 100%;
     height: auto;
}
/* End Hero Section */

/* Section Text Modifications */
.section1heading h1,
.section2heading h1,
.section3heading h1 {
     font-size: 40px;
     line-height: 35px;
     color: #1b110d;
     font-weight: bold;
     text-align: left;
     word-break: break-all;
}

.section1subheading h2,
.section2subheading h2,
.section3subheading h2 {
     font-size: 30px;
     line-height: 25px;
     color: #1b110d;
     font-weight: bold;
     text-align: left;
     padding-bottom: 20px;
     word-break: break-all;
}

body,
p,
.section1text p,
.section2text p,
.section3text p {
     font-size: 18px;
     line-height: 1.4em;
     color: #000000;
     font-family: "Inter", Verdana, Arial, sans-serif;
     font-weight: 400;
     word-break: break-word;
}
/* Section Text Modifications */

/* Section Show and Hide */
#heroSection {
    display: ${HeroBlock};
}

#pageNavigation {
    display: ${pageNavi};
}
    
#section1 {
    display: ${ShowSection1};
}

#section2 {
    display: ${ShowSection2};
}

#section3FormBlock1 {
    display: ${ShowSection3Form1};
}

#section3FormBlock2 {
    display: ${ShowSection3Form2};
}

#section3FormBlock3 {
    display: ${ShowSection3Form3};
}

#section3FormBlock4 {
    display: ${ShowSection3Form4};
}

#section4 {
    display: ${ShowSection4};
}
    
#pageFooter {
    display: ${ShowFooter};
}

    
/* Section Modifications */
.section1 {
 text-align: left;
 padding: 30px 0;
}

.section2 {
     text-align: left;
     padding: 30px 0;
}

.section3 {
     padding: 60px 0 60px;
     margin-top: 40px;
     background-color: #006b7d;
     background-image: url("https://www.also.com/ec/cms5/media/img/global_images/key_visuals/also_key_visual_general_for_teal_backgrounds_1_rgb.svg");
     background-position: top right;
     background-size: contain;
     background-repeat: no-repeat;
}

.section3 .subHeading {
     padding-left: 0;
     padding-right: 0;
}

.section3 .subHeading .section3subheading h2 {
     background-color: #000;
     color: #fff;
     margin-bottom: 0;
     line-height: 1;
     display: inline-block;
     padding: 20px 15px;
     text-transform: uppercase;
}

.section3 .formBlock1 {
    /*margin-top: 40px;*/
}

.section3 .formBlock1,
.section3 .formBlock2,
.section3 .formBlock3,
.section3 .formBlock4 {
    /*background-color: #fff;*/
    /*margin-bottom: 40px;*/
    /*padding: 30px;*/

}

.section3 .formBlock1 .formHeading,
.section3 .formBlock2 .formHeading,
.section3 .formBlock3 .formHeading,
.section3 .formBlock4 .formHeading {
    background-color: #fff;
    display: block;
    padding: 30px 30px 0;
    margin-top: 40px;
}

.section3 .formBlock1 .formHeading h2,
.section3 .formBlock2 .formHeading h2,
.section3 .formBlock3 .formHeading h2,
.section3 .formBlock4 .formHeading h2 {
    margin-top: 0;
    margin-bottom: 0;
}

.section3 .formBlock1 .formContent,
.section3 .formBlock2 .formContent,
.section3 .formBlock3 .formContent,
.section3 .formBlock4 .formContent {
    background-color: #fff;
    display: block;
    padding: 10px 30px 0;
}

.section3 .formBlock1 .formContent p,
.section3 .formBlock2 .formContent p,
.section3 .formBlock3 .formContent p,
.section3 .formBlock4 .formContent p {
    margin: 0;
}

.section3 .formBlock1 .formBlock,
.section3 .formBlock2 .formBlock,
.section3 .formBlock3 .formBlock,
.section3 .formBlock4 .formBlock {
    display: block;
    background-color: #fff;
    padding: 30px;
}

.section4 {
    margin: 60px 0;
}
/* Section Modifications */

/* Footer */
.footer {
    display: flex;
    justify-content: center;
    background-color: #89E872;
    padding: 30px 0;
    text-align: center;
}
    
.footer a {
    padding: 0 20px;
    font-size: 14px;
    line-height: 20px;
    color: #000000;
    font-family: "Raleway", Verdana, Arial, sans-serif;
    font-weight: 800;
}

.footer p {
    padding-top: 20px;
    font-size: 14px;
    line-height: 12px;
    color: #000000;
    font-family: "Raleway", Verdana, Arial, sans-serif;
    font-weight: 500;
    word-break: break-all;
}
/* End Footer */

/* Mobile Settings */
@media screen and (max-width: 640px) {
    h1 {
        font-size: 30px!important;
    }

    h2 {
        font-size: 26px!important;
    }

    .header .desktopNav {
        display: none;
    }

    .header .mobileNav {
        margin: 20px 0;
        display: flex;
        justify-content: flex-end;
        align-items: center;
    }

    .header .mobileNav a {
        padding: 10px;
        display: block;
    }

    .header .mobileNav div:last-child {
        width: 30%;
    }

    .banner {
        padding: 30px 15px;
    }

    .banner h1 {
        font-size: 30px;
    }

    .hero-section {
        display: flex;
        flex-direction: column-reverse;
        align-items: flex-start;
    }

    .footer {
        flex-direction: column;
        align-items: flex-start;
    }
}